<template>
  <view class="game-settings-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">荒岛生存设置</text>
      <text class="page-subtitle">自定义荒岛生存游戏体验</text>
    </view>
    
    <!-- 游戏设置分类 -->
    <view class="settings-categories">
      <!-- 音效设置 -->
      <view class="category-section">
        <view class="section-header" @click="toggleAudioSettings">
          <text class="section-title">🔊 音效设置</text>
          <text class="section-arrow" :class="{ expanded: showAudioSettings }">></text>
        </view>
        
        <view v-if="showAudioSettings" class="section-content">
          <view class="setting-item">
            <text class="setting-name">音效</text>
            <switch 
              :checked="gameSettings.soundEnabled" 
              @change="toggleSound"
              color="#667eea"
            />
          </view>
          
          <view class="setting-item">
            <text class="setting-name">背景音乐</text>
            <switch 
              :checked="gameSettings.musicEnabled" 
              @change="toggleMusic"
              color="#667eea"
            />
          </view>
          
          <view class="setting-item">
            <text class="setting-name">震动反馈</text>
            <switch 
              :checked="gameSettings.vibrationEnabled" 
              @change="toggleVibration"
              color="#667eea"
            />
          </view>
        </view>
      </view>
      
      <!-- 显示设置 -->
      <view class="category-section">
        <view class="section-header" @click="toggleDisplaySettings">
          <text class="section-title">🖥️ 显示设置</text>
          <text class="section-arrow" :class="{ expanded: showDisplaySettings }">></text>
        </view>
        
        <view v-if="showDisplaySettings" class="section-content">
          <view class="setting-item">
            <text class="setting-name">深色模式</text>
            <switch 
              :checked="gameSettings.darkMode" 
              @change="toggleDarkMode"
              color="#667eea"
            />
          </view>
          
          <view class="setting-item" @click="selectDifficulty">
            <text class="setting-name">游戏难度</text>
            <text class="setting-value">{{ getDifficultyText(gameSettings.difficulty) }}</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item">
            <text class="setting-name">动画效果</text>
            <switch 
              :checked="gameSettings.animationsEnabled" 
              @change="toggleAnimations"
              color="#667eea"
            />
          </view>
        </view>
      </view>
      
      <!-- 游戏数据 -->
      <view class="category-section">
        <view class="section-header" @click="toggleDataSettings">
          <text class="section-title">📊 游戏数据</text>
          <text class="section-arrow" :class="{ expanded: showDataSettings }">></text>
        </view>
        
        <view v-if="showDataSettings" class="section-content">
          <view class="setting-item" @click="showGameStats">
            <text class="setting-name">游戏统计</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item" @click="backupGameData">
            <text class="setting-name">备份存档</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item" @click="restoreGameData">
            <text class="setting-name">恢复存档</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item" @click="resetGameData">
            <text class="setting-name">重置游戏</text>
            <text class="setting-arrow">></text>
          </view>
        </view>
      </view>
      
      <!-- 帮助与支持 -->
      <view class="category-section">
        <view class="section-header" @click="toggleHelpSettings">
          <text class="section-title">❓ 帮助与支持</text>
          <text class="section-arrow" :class="{ expanded: showHelpSettings }">></text>
        </view>
        
        <view v-if="showHelpSettings" class="section-content">
          <view class="setting-item" @click="showGameHelp">
            <text class="setting-name">游戏帮助</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item" @click="showGameControls">
            <text class="setting-name">操作说明</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item" @click="showAboutGame">
            <text class="setting-name">关于游戏</text>
            <text class="setting-arrow">></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GameSettingsPage',
  props: {
    gameSettings: {
      type: Object,
      required: true
    },
    showAudioSettings: {
      type: Boolean,
      default: false
    },
    showDisplaySettings: {
      type: Boolean,
      default: false
    },
    showDataSettings: {
      type: Boolean,
      default: false
    },
    showHelpSettings: {
      type: Boolean,
      default: false
    }
  },
  
  methods: {
    toggleAudioSettings() {
      this.$emit('toggle-audio-settings')
    },
    
    toggleDisplaySettings() {
      this.$emit('toggle-display-settings')
    },
    
    toggleDataSettings() {
      this.$emit('toggle-data-settings')
    },
    
    toggleHelpSettings() {
      this.$emit('toggle-help-settings')
    },
    
    toggleSound(e) {
      this.$emit('toggle-sound', e)
    },
    
    toggleMusic(e) {
      this.$emit('toggle-music', e)
    },
    
    toggleVibration(e) {
      this.$emit('toggle-vibration', e)
    },
    
    toggleDarkMode(e) {
      this.$emit('toggle-dark-mode', e)
    },
    
    toggleAnimations(e) {
      this.$emit('toggle-animations', e)
    },
    
    selectDifficulty() {
      this.$emit('select-difficulty')
    },
    
    getDifficultyText(difficulty) {
      const difficultyMap = {
        'easy': '简单',
        'normal': '普通',
        'hard': '困难'
      }
      return difficultyMap[difficulty] || '普通'
    },
    
    showGameStats() {
      this.$emit('show-game-stats')
    },
    
    backupGameData() {
      this.$emit('backup-game-data')
    },
    
    restoreGameData() {
      this.$emit('restore-game-data')
    },
    
    resetGameData() {
      this.$emit('reset-game-data')
    },
    
    showGameHelp() {
      this.$emit('show-game-help')
    },
    
    showGameControls() {
      this.$emit('show-game-controls')
    },
    
    showAboutGame() {
      this.$emit('show-about-game')
    }
  }
}
</script>

<style scoped>
.game-settings-page {
  padding: 20rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.settings-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20rpx;
}

.category-section {
  background: white;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  cursor: pointer;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.section-arrow {
  font-size: 24rpx;
  color: #999;
  transition: transform 0.3s ease;
}

.section-arrow.expanded {
  transform: rotate(90deg);
}

.section-content {
  padding: 0 30rpx 20rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f8f9fa;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-name {
  flex: 1;
  font-size: 26rpx;
  color: #333;
}

.setting-value {
  font-size: 24rpx;
  color: #666;
  margin-right: 10rpx;
}

.setting-arrow {
  font-size: 20rpx;
  color: #999;
}
</style>
